{% extends 'index.html' %}

{% block title %} 我的购物车 {% endblock %}

{% block page_name %} 购物车 {% endblock %}

{% block content %}
    <!-- 购物车内容 -->
	<div class="checkout">
		<div class="container">
			<!--当前用户的购物车-->
			<h2>你的购物车包括: <span>{{ 当前用户购物车产品数量 }} 个产品</span></h2>
			<div class="checkout-right">
				<table class="timetable_sub">
					<thead>
						<tr>
							<th>序号</th>
							<th>数量</th>
							<th>名称</th>

							<th>价格</th>
							<th>移除</th>
						</tr>
					</thead>
					<!--循环遍历购物车里的商品-->
                    {%for product in carproductlist%}
						<tr class="rem1">
							<td class="invert">{{ 序号应该随着循环自增 }}</td>
							<td class="invert">
								 <div class="quantity">
									<div class="quantity-select">
										<div class="entry value-minus">&nbsp;</div>
										<div class="entry value"><span>1</span></div>
										<div class="entry value-plus active">&nbsp;</div>
									</div>
								</div>
							</td>
							<td class="invert">{{ 产品名称 }}</td>

							<td class="invert">${{ 产品价格 }}</td>
							<td class="invert">
								<div class="rem">
									<div class="close1"> </div>
								</div>
								<script>$(document).ready(function(c) {
									$('.close1').on('click', function(c){
										$('.rem1').fadeOut('slow', function(c){
											$('.rem1').remove();
										});
										});
									});
								 </script>
							</td>
						</tr>
					{% endfor %}
								<!--quantity-->
									<script>
									$('.value-plus').on('click', function(){
										var divUpd = $(this).parent().find('.value'), newVal = parseInt(divUpd.text(), 10)+1;
										divUpd.text(newVal);
									});

									$('.value-minus').on('click', function(){
										var divUpd = $(this).parent().find('.value'), newVal = parseInt(divUpd.text(), 10)-1;
										if(newVal>=1) divUpd.text(newVal);
									});
									</script>
								<!--quantity-->
				</table>
			</div>
			<div class="checkout-left">
				<div class="checkout-right-basket">
					<!--跳转到所有商品all_products.html页面-->
					<a href=""><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span>继续购物</a>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
{% endblock %}